<template>
    <div class="btn-container">
        <!-- <div :class="['btn',{'disable':cancelDisabled}]"
             :style="{ color: cancelTextColor }"
             v-if="cancelShow"
             @click="cancel">{{cancelText}}</div>
        <div class="line" v-if="cancelShow"></div>
        <div :class="['btn',{'disable':confirmDisabled}]"
             :style="{ color: confirmTextColor }"
             @click="confirm">{{confirmText}}</div> -->
        <p class="Bubble" @click="closeBubble">
            <span v-if="isShow && disable == false" :style="{ 'left':position1 }">
                {{ confirmText }}
                <div :style="{ 'left':position2 }"></div>
            </span>
        </p>

    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
        }
    },
    props: {
        confirmText: {
            type: String,
            default() {
                return "tips";
            }
        },
        disable: {
            type: Boolean,
            default: false
        },
        isenglish: {
            type: Boolean,
            default: false
        },
        cancelText: {
            type: String,
            default() {
                return this.$t('cancel');
            }
        },
        width1: {
            type: String,
            default: "28rem"
        },
        position1: {
            type: String,
            default:""
        },
        position2: {
            type: String,
            default:""
        },

    },
    watch: {
        isShow: {
            handler(n, o) {
                if (n) {
                    setTimeout(() => {
                        this.isShow=false
                    },1000)
                }
            }

        }
    },
    computed: {
        // width1() {
        //     return this.isenglish ? "280px" : "270px"
        // },
        // position1(){
        //     return this.isenglish ? "-8rem" : "-3.8rem"
        // },
        // position2(){
        //     return this.isenglish ? "7.2rem" : "3rem"
        // }
    },

    methods: {
        closeBubble() {
            this.isShow = !this.isShow
            this.$emit('cancel');
        },

    }
};
</script>

<style lang="less" scoped>
@import url("../style/public.less");

.btn-container {
    // height: 5.6rem;
    // padding: 0 1.6rem 1.6rem;
    // box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    font-size: var(--emui_text_size_button1);
    color: var(--emui_accent);
    .medium();



    .Bubble {
        width: 1.6rem;
        height: 1.6rem;
        background: url(../assets/ic_tips_normal.png) no-repeat;
        vertical-align: middle;
        background-size: 1.6rem 1.6rem;
        font-size: 1.4rem;
        color: #fff;
        position: relative;
        top: 2px;
        left: 3px;

        span {
            
            box-sizing: border-box;
            padding: 1.2rem 1.6rem;
            background: #4d4d4d;
            font-size: 1.4rem;
            border-radius: 1.6rem;
            color: #fff;
            box-shadow: 0rem 1rem 5rem rgb(0 0 30 / 15%);
            position: absolute;
            bottom: 2.9rem;
            left: -38px;
            z-index: 3;
            display: table;
            min-width:20rem;
            width:20rem;
            max-width:28rem;


            div {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: #4d4d4d;
                transform: rotate(45deg);
                position: absolute;
                left: 30px;
                bottom: -2px;
                border-radius: 0 0 5px;
                z-index: -2;
            }
        }
    }
}

.dark {
    .Bubble {
        width: 1.6rem;
        height: 1.6rem;
        background: url(../assets/ic_tips_Dark.png) no-repeat;
        vertical-align: middle;
        background-size: 1.6rem 1.6rem;
        font-size: 1.4rem;
        color: #fff;
        position: relative;
        top: 2px;
        left: 3px;

        span {
            box-sizing: border-box;
            padding: 1.2rem 1.6rem;
            background: #4d4d4d;
            font-size: 1.4rem;
            border-radius: 1.6rem;
            color: #fff;
            box-shadow: 0rem 1rem 5rem rgb(0 0 30 / 15%);
            position: absolute;
            bottom: 3.4rem;
            left: -3.8rem;
            z-index: 3;




            div {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: #4d4d4d;
                transform: rotate(45deg);
                position: absolute;
                left: 30px;
                bottom: -2px;
                border-radius: 0 0 5px;
                z-index: -2;
            }
        }
    }
}
</style>
